<template>
  <div class="page">
    <div class="head">
      <div class="head-box">
        <div class="box-item">订单名称：{{ orderItem.orderName }}</div>
        <div class="box-item">客户姓名：{{ orderItem.custName }}</div>
        <div class="box-item">订单总金额（元）：￥{{ orderItem.orderActualAmt }}</div>
      </div>
      <div class="head-box">
        <div class="box-item">商品数量：{{ orderItem.goodsTotalQty }}</div>
        <div class="box-item">
          订单状态：
          <Tag :color="this.$dict.orderStatus.color(orderItem.orderStatus)">
            {{ this.$dict.orderStatus.name(orderItem.orderStatus) }}
          </Tag>
        </div>
        <div class="box-item">订单时间：{{ timestampToTime(orderItem.postTime) }}</div>
      </div>
      <div class="head-box">
        <div class="box-item">收货人：{{ orderItem.consigneeName }}</div>
        <div class="box-item">收货人电话：{{ orderItem.consigneeMobile }}</div>
        <div class="box-item">
          配送地址：{{ orderItem.provinceName }}/{{ orderItem.cityName }}/{{ orderItem.countyName }}/{{
            orderItem.addressDetail
          }}
        </div>
      </div>
    </div>
    <div class="main">
      <Table border :columns="columns" :data="dataGrid"></Table>
      <br />
      <div>
        <Divider>发货信息</Divider>
        <Form :label-width="140" style="width: 50%">
          <FormItem label="发货类型" required>
            <Select placeholder="选择发货类型" clearable v-model="formData.logisticsType">
              <Option :value="1">快递公司</Option>
              <Option :value="2">同城配送</Option>
              <Option :value="3">虚拟发货</Option>
              <Option :value="4">自提/到店</Option>
            </Select>
          </FormItem>
          <FormItem label="物品名称" required>
            <Input v-model="formData.cargoName" placeholder="请输入物品名称"></Input>
          </FormItem>
          <FormItem label="发货人" required>
            <Input v-model="formData.senderName" placeholder="请输入发货人"></Input>
          </FormItem>
          <FormItem label="发货人手机号" required>
            <Input v-model="formData.senderMobile" placeholder="请输入发货人手机号"></Input>
          </FormItem>
          <FormItem label="发货地区选择" required>
            <Input v-model="formData.senderAddress" placeholder="请输入发货地"></Input>
            <!-- <Cascader :data="regionArray" @on-change="regionSelector" :load-data="loadRegion"></Cascader> -->
          </FormItem>
          <FormItem v-if="formData.logisticsType === 1 || formData.logisticsType === 2" label="快递公司" required>
            <Select placeholder="选择快递公司" clearable v-model="formData.corpCode">
              <Option v-for="item in seletions" :key="item.id" :value="item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem v-if="formData.logisticsType === 1 || formData.logisticsType === 2" label="物流运单号">
            <Input v-model="formData.waybillNo" placeholder="请输入物流运单号"></Input>
          </FormItem>
        </Form>
      </div>
      <div style="text-align: center">
        <Button @click="Submit" type="success">一键发货</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DeliverSelf',
  data() {
    return {
      seletions: this.$dict.logisticsCorp.data,
      dataGrid: [],
      orderItem: {},
      regionArray: [],
      selectRegions: [],
      preOrder: {
        corpCode: null,
        cargoWeight: null,
        senderProvince: null,
        senderCity: null,
      },
      formData: {
        logisticsType: 4, //1快递公司，2同城配送，3虚拟商品，4用户自提
        printType: 1, //00仅下单不打印，1生成图片短链
        shopOrderId: null,
        corpCode: null,
        senderName: null,
        senderMobile: null,
        senderAddress: null,
        recvName: null,
        recvMobile: null,
        recvAddress: null,
        cargoName: null,
        waybillNo: null,
        corpName: null,
        shopId: this.$store.getShop('shopId'),
        orgId: this.$store.getOrg('orgId'),
      },
      columns: [
        {
          title: '商品图片',
          key: 'goodsImg',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h(
                'img',
                {
                  attrs: { src: params.row.goodsImg },
                  style: { width: '50px', height: '46px' },
                },
                'View'
              ),
            ])
          },
        },
        {
          title: 'SKUID',
          key: 'skuId',
          width: 220,
        },
        {
          title: '商品名称',
          key: 'goodsName',
        },
        {
          title: '规格/型号',
          key: 'goodsSpec',
        },
        {
          title: '订单数量',
          key: 'goodsQty',
          width: 150,
        },
        {
          title: '单价(元)',
          key: 'salePrice',
          width: 150,
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('a', { style: { fontSize: '12px', color: 'gray' } }, '￥'),

              h('span', params.row.salePrice),
            ])
          },
        },
        {
          title: '总金额(元)',
          key: 'actualAmt',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h('a', { style: { fontSize: '12px', color: 'gray' } }, '￥'),

              h('span', this.goodsAllMoney(params.row.salePrice, params.row.goodsQty)),
            ])
          },
        },
      ],
    }
  },
  props: {
    callbank: Function,
  },
  created() {},
  methods: {
    init(order) {
      this.orderItem = order
      this.getGoods(order.shopOrderId)
      this.lastedTms()
    },
    getGoods(shopOrderId) {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-order',
        url: '/v1.0/mall/goods/order/detail/page',
        query: {
          equal: {
            shopOrderId: shopOrderId,
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.dataGrid = res.data.data.list
            this.formData.cargoName = res.data.data.list[0].goodsName
          } else {
            this.$Notice.warning({
              title: '订单详情获取失败',
              desc: `失败原因：${res.data.msg}`,
            })
          }
        },
      }).get()
    },
    lastedTms() {
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-tms',
        url: '/v1.0/plus/shop/tms/order/last',
        query: {
          equal: 9,
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            this.formData.senderName = data.senderName
            this.formData.senderMobile = data.senderMobile
            this.formData.senderAddress = data.senderAddress
          } else {
            this.$Message.error({
              content: res.data.msg,
            })
          }
        },
      }).get()
    },
    regionInit() {
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/plus/union/region/lazy',
        query: {
          equal: {
            regionId: '0',
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            this.regionArray = data
          } else {
            this.$Message.error({
              content: res.data.msg,
            })
          }
        },
      }).get()
    },
    loadRegion(item, callback) {
      item.loading = true
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/plus/union/region/lazy',
        query: {
          equal: {
            regionId: item.id,
            regionLevel: 3,
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            item.children = data
            item.loading = false
            callback()
          } else {
            this.$Message.error({
              content: res.data.msg,
            })
          }
        },
      }).get()
    },
    regionSelector(value, data) {
      console.log(data, 'data')
      console.log(value, 'value')
      this.selectRegions = data
      this.preOrder.senderProvince = data[0].label
      this.preOrder.senderCity = data[1].label
    },
    Submit() {
      this.SelfSend()
    },
    //自助发货
    SelfSend() {
      if (this.formData.logisticsType <= 2 && !this.formData.corpCode) {
        this.$Message.error('请选择快递公司')
        return false
      }
      if (this.formData.logisticsType <= 2 && !this.formData.waybillNo) {
        this.$Message.error('请输入运单号')
        return false
      }
      if (this.formData.logisticsType <= 2) {
        this.formData.corpName = this.$dict.logisticsCorp.name(this.formData.corpCode)
      } else {
        this.formData.corpName = '自提/虚拟发货'
      }
      this.formData.shopOrderId = this.orderItem.shopOrderId
      this.formData.recvName = this.orderItem.consigneeName
      this.formData.recvMobile = this.orderItem.consigneeMobile
      this.formData.recvAddress =
        this.orderItem.provinceName + this.orderItem.cityName + this.orderItem.countyName + this.orderItem.addressDetail
      //   this.formData.senderAddress =
      //     this.selectRegions[0].label +
      //     this.selectRegions[1].label +
      //     this.selectRegions[2].label +
      //     this.formData.senderAddress
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-tms',
        url: '/v1.0/plus/express/shop/send/self',
        data: {
          pojo: this.formData,
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success('发货成功')
            this.callbank()
          } else {
            this.$Notice.warning({
              title: '操作失败',
              desc: res.data.msg,
            })
          }
        },
      }).post()
    },
    timestampToTime(timestamp) {
      return this.$date(timestamp, 'yyyy-MM-dd HH:mm:ss')
    },
    goodsAllMoney(salePrice, goodsQty) {
      let moneyAll = (salePrice * goodsQty).toFixed(2)
      return moneyAll
    },
  },
}
</script>
<style lang="less" scoped>
.page {
  width: 100%;
}
.head {
  width: 100%;
}
.head-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 30px;
}
.head-box .box-item:nth-child(1) {
  width: 30%;
}
.head-box .box-item:nth-child(2) {
  width: 30%;
}
.head-box .box-item:nth-child(3) {
  width: 40%;
}
.btns {
  margin: 16px 0px;
}
.item-image {
  display: flex;
  align-items: flex-start;
}
.express-card {
  display: inline-block;
  width: 24%;
  text-align: center;
  position: relative;
  margin: 5px;
  vertical-align: top;
  padding: 10px;
  min-height: 120px;
}
</style>
